<template>
  <div>
     <side-bar></side-bar>
     <Header></Header>
     
     <div class="input">
       <h2>请输入以下信息，查询文件信息以及是否被篡改</h2>
     <el-divider></el-divider>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        
  <!-- <el-form-item label="  交易哈希:">
    <el-input v-model="formInline.hash" placeholder="请输入交易哈希"></el-input>
  </el-form-item> -->
  <el-form-item label="  查询存证数据的方式:">
    <el-select v-model="formInline.region" placeholder="查询存证数据的方式">
       <el-option label="文件唯一标识" value="文件唯一标识"></el-option>
      <el-option label="sha256加密值" value="sha256加密值"></el-option>
      <el-option label="sm3加密值" value="sm3加密值"></el-option>
      <el-option label="md5加密值" value="md5加密值"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="  查询值:">
    <el-input v-model="formInline.searchvalue" placeholder="请输入查询值"></el-input>
  </el-form-item>
  <el-form-item>
    <el-form-item label=" 链ID:">
        <el-select v-model="formInline.chain" placeholder="请输入需要上传的链">
       <el-option label="默认" value="默认"></el-option>
      <el-option label="华南链节点" value="华南链节点"></el-option>
      <el-option label="华北链节点" value="华北链节点"></el-option>
      
    </el-select>
    </el-form-item>
    <el-form-item label="  合约地址:">
        <el-select v-model="formInline.user" placeholder="请输入合约地址">
       <el-option label="默认" value="默认"></el-option>
      <el-option label="合约1" value="合约1"></el-option>
      <el-option label="合约2" value="合约2"></el-option>
      
    </el-select>
    </el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
       
     </div>
    
      <div class="tab">
  <el-table
    :data="tableData"
    border
    :header-cell-style="getRowClass"
    stripe
    style="width: 80%;">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="file_id"
      label="文件唯一标识"
      width="180">
    </el-table-column>
    <el-table-column
      prop="transaction_hash"
      label="交易哈希"
      width="180">
    </el-table-column>
    <el-table-column
      prop="block_height"
      label="区块高度">
    </el-table-column>
    <el-table-column
      prop="block_hash"
      label="区块哈希">
    </el-table-column>
    <el-table-column
      prop="uploadtime"
      label="上传时间">
    </el-table-column>
  </el-table>
  </div>

  </div>
</template>

<script>
import SideBar from '.././components/common/SideBar'
import Header from '.././components/content/Header'
import axios from 'axios'
import Web3 from "web3";
export default{
  name: 'Search',
   data() {
      return {
        formInline: {
          user: '',
          region: '',
          chain:''
        },

        tableData: [],
      }
   },
    
  components: {
    SideBar,
    Header
  },
  // mounted() {
    //如果在mounted写函数，那会只要页面一加载完就调用这个函数
  //   this.onSubmit()
  // },
  methods: {
    //控制表格头部颜色
getRowClass ({ rowIndex }) {
      if (rowIndex == 0) {
        return 'background:#fdf5e6'
      } else {
        return ''
      }
},
    

    onSubmit() {
        
        //将way绑定查询方式
         var way;
        if(this.formInline.region=="文件唯一标识"){
          this.way=1
        }else if(this.formInline.region=="sha256加密值"){
          this.way=2
        }else if(this.formInline.region=="sm3加密值"){
          this.way=3
        }else if(this.formInline.region=="md5加密值"){
          this.way=4
        }
        
        var json;
        json ={
            way:2,
            //tran_hash:"0x1111111111111",
            file_id:"0x1234",
            sha256:"0x1234",
            sm3:"0x1234",
            md5:"0x1234",    
            chain_id:"",
            contract_addr:"",
        }
        json.way=this.way
        //json.tran_hash=this.formInline.hash

        //将查询方式与查询值赋值
        if(this.way==1){
          json.file_id=this.formInline.searchvalue
        }else if(this.way==2){
          json.sha256=this.formInline.searchvalue
        }else if(this.way==3){
          json.sm3=this.formInline.searchvalue
        }else if(this.way==4){
          json.md5=this.formInline.searchvalue
        }
        
          // console.log("way为"+this.json.way)
          // console.log("上传前交易哈希为"+this.json.tran_hash)
          // console.log("文件唯一标识为"+this.json.file_id);

        //发送数据到服务器
        axios.post('/api/api/verify/chain',json,{
          headers:{
            'Content-Type':'application/json'
          }
        }).then((res)=>{
          console.log(json)
          //出现弹窗
          if(res.data.code===0){
          this.$message({
          message: '文件未被篡改，区块链上信息见下表',
          type: 'success'
           });
          }else {
            this.$message.error('查询失败,请正确输入信息');
          }
        // this.$alert('文件未被篡改，文件在区块链上的信息见下表！！', '', {
        //   confirmButtonText: '确定',
        //   callback: action => {
            
        //   }
        //});
          console.log(res)
          //console.log(res.data.data[0]);
          // this.tableData.file_id=res.data.data[0].file_id
          // this.tableData.transaction_hash=res.data.data[0].tran_hash
          // this.tableData.block_height=res.data.data[0].block_height
          // this.tableData.block_hash=res.data.data[0].block_hash
          // this.tableData.uploadtime=res.data.data[0].block_timestamp
          // this.tableData.length=res.data.data.length
          // console.log(this.tableData);
          // console.log(res.data.data.length);
          // console.log(this.tableData.length);

          this.tableData=res.data.data.map((item)=>{
            item.file_id=item.file_id
            item.transaction_hash=item.tran_hash
            item.block_height=item.block_height
            item.block_hash=item.block_hash
            item.uploadtime=item.req_timestamp
            return item

          })
          console.log(this.tableData);

          




        }).catch((error)=>{
          console.log(error)
          this.$message.error('查询失败');
        })
      }
      
    }
}

</script>

<style scoped>
.tab{
  /* margin-top:150px; */
  margin-top:370px;
  margin-left:500px;
  
}
.input{
  position:absolute;;
  top:160px;
  left:500px;
  
 
}
h2{
  color:#be3838;
  /* background-color:#fff;
  padding:10px;
  border-radius:5px; */
  /* margin-top:80px;
  margin-left:-350px;  */
  
 }

</style>